<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Some-Tools 进制转换</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="./jquery-3.4.1.js">
    <link rel="stylesheet" href="./Basestyle.css">
    <link rel='icon' href='../image/ICO.ico' type='image/x-ico' />

</head>

<body>
    <span id="title">进制转换</span>
    <div id="body">
        <div class="form-inline">
            <div class="input-group mb-1 container mt-3">
                <div class="input-group-prepend">
                    <button id="iniBtn" class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="initBaseList">二进制</span></button>
                    <div class="dropdown-menu">
                        <button onclick="dinary()" type="button" class="btn btn-light dropdown-item">二进制</button>
                        <button onclick="decimal()" type="button" class="btn btn-light dropdown-item">十进制</button>
                        <button onclick="octal()" type="button" class="btn btn-light dropdown-item">八进制</button>
                        <button onclick="hexadecimal()" type="button" class="btn btn-light dropdown-item">十六进制</button>
                    </div>
                </div>
                <input oninput="inputNum()" id="inputNum" placeholder="输入数字" type="text" size="50" class="form-control" aria-label="Text input with dropdown button">
            </div>
        </div>
        <br>
        <div class="form-inline">
            <div class="input-group mb-1 container mt-3">
                <div class="input-group-prepend">
                    <button id="btnList" class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="targetBaseList">二进制</span></button>
                    <div class="dropdown-menu">
                        <button onclick="targetDinary()" type="button" class="btn btn-light dropdown-item">二进制</button>
                        <button onclick="targetDecimal()" type="button" class="btn btn-light dropdown-item">十进制</button>
                        <button onclick="targetOctal()" type="button" class="btn btn-light dropdown-item">八进制</button>
                        <button onclick="targetHexadecimal()" type="button" class="btn btn-light dropdown-item">十六进制</button>
                    </div>
                </div>
                <input id="outputNum" placeholder="转换结果" type="text" size="50" class="form-control" aria-label="Text input with dropdown button">
            </div>
        </div>
    </div>

    <script>
        let decimalNum = 0;
        let initBase = $("#initBaseList").html();
        let targetBase = $("#targetBaseList").html();
        let arrBase;

        function anyToDecimal(num, base) {
            return parseInt(num, base);
        }

        function inputNum() {
            console.log($("#inputNum").val());
            switch (initBase) {
                case '二进制':
                    decimalNum = parseInt($("#inputNum").val(), 2);
                    break;
                case '八进制':
                    decimalNum = parseInt($("#inputNum").val(), 8);
                    break;
                case '十六进制':
                    decimalNum = parseInt($("#inputNum").val(), 16);
                    break;
                case '十进制':
                    decimalNum = parseInt($("#inputNum").val(), 10);
                    break;
            }
            arrBase = [decimalNum.toString(2), decimalNum, decimalNum.toString(8), decimalNum.toString(16)];
            console.log(arrBase, decimalNum);
            switch (targetBase) {
                case '二进制':
                    $("#outputNum").val(arrBase[0]);
                    break;
                case '八进制':
                    $("#outputNum").val(arrBase[2]);
                    break;
                case '十六进制':
                    $("#outputNum").val(arrBase[3]);
                    break;
                case '十进制':
                    $("#outputNum").val(arrBase[1]);
                    break;
            }
        }

        function decimal() {
            $("#initBaseList").html('十进制');
            initBase = '十进制';
        }

        function dinary() {
            $("#initBaseList").html('二进制');
            initBase = '二进制';
        }

        function octal() {
            $("#initBaseList").html('八进制');
            initBase = '八进制';

        }

        function hexadecimal() {
            $("#initBaseList").html('十六进制');
            initBase = '十六进制';
        }
        ///
        function targetDinary() {
            console.log('二进制');
            $("#targetBaseList").html('二进制');
            targetBase = '二进制';
            $("#outputNum").val(arrBase[0]);
        }

        function targetDecimal() {
            console.log('十进制');
            $("#targetBaseList").html('十进制');
            targetBase = '十进制';
            $("#outputNum").val(arrBase[1]);
        }

        function targetOctal() {
            console.log('八进制');
            $("#targetBaseList").html('八进制');
            targetBase = '八进制';
            $("#outputNum").val(arrBase[2]);

        }

        function targetHexadecimal() {
            console.log('十六进制');


            $("#targetBaseList").html('十六进制');
            targetBase = '十六进制';
            $("#outputNum").val(arrBase[3]);
        }
    </script>
</body>

</html>